import { Tabs, TabsProps } from 'antd';

export interface TableTabsProps {
  tabs?: TabsProps | false;
  activeKey?: TabsProps['activeKey'];
  onTabsChange?(entity: NonNullable<TabsProps['items']>[number]): void;
}

export function TableTabs({ tabs, activeKey, onTabsChange }: TableTabsProps) {
  if (tabs && tabs.items && tabs.items.length > 1) {
    const { onChange, items, ...props } = tabs;
    return (
      <Tabs
        className="ym_table_tabs"
        items={items.map(({ label, ...v }) => {
          return {
            // 目前暂时不会生效
            label: (
              <span style={{ fontSize: 16, fontWeight: 500 }}>{label}</span>
            ),
            ...v,
          };
        })}
        activeKey={activeKey}
        onChange={(activeKey) => {
          onChange?.(activeKey);
          const entity = items.find(
            (v) => v.key === (tabs.activeKey ?? activeKey),
          );
          if (entity) {
            onTabsChange?.(entity);
          }
        }}
        tabBarStyle={{ margin: 0 }}
        {...props}
      />
    );
  } else {
    return null;
  }
}
